import 'package:flutter/material.dart';
import 'package:flutter_2/pages/RecommendPage/BottomSheet.dart';
import 'package:flutter_2/providers/RecommendProvider.dart';
import 'package:flutter_2/widget/BottomBar.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '某音',
      theme: ThemeData(primaryColor: Color(0xff121319)),
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(color: Colors.grey),
          child: const RecommendPage(),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 60,
            decoration: const BoxDecoration(color: Colors.black),
            child: BtmBar(
              selectIndex: 0,
            ),
          ),
        ),
      ),
    );
  }
}

class RecommendPage extends StatelessWidget {
  const RecommendPage({Key? key, selIndex}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    // double rpx = screenWidth / 750;
    return Stack(
      children: [
        Positioned(
          top: 0,
          height: 120,
          width: screenWidth,
          child: Container(
            // decoration: const BoxDecoration(color: Colors.pinkAccent),
            child: const TobBar(),
          ),
        ),
        Positioned(
          bottom: 0,
          width: 0.70 * screenWidth,
          height: 120,
          child: Container(
            // decoration: const BoxDecoration(color: Colors.redAccent),
            child: BtnContent(),
          ),
        ),
        Positioned(
          right: 0,
          width: 0.25 * screenWidth,
          height: 0.3 * screenHeight,
          top: 0.4 * screenHeight,
          child: Container(
            // decoration: const BoxDecoration(color: Colors.orange),
            child: getButtonList(context),
          ),
        ),
        Positioned(
          right: 0,
          bottom: 10,
          width: 0.25 * screenWidth,
          height: 0.25 * screenWidth,
          child: Container(
            // decoration: const BoxDecoration(color: Colors.purpleAccent),
            padding: EdgeInsets.all(15),
            child: RotateAlbum(),
          ),
        ),
      ],
    );
  }
}

class TobBar extends StatefulWidget {
  const TobBar({Key? key}) : super(key: key);

  @override
  State<TobBar> createState() => _TobBarState();
}

class _TobBarState extends State<TobBar> with SingleTickerProviderStateMixin {
  late TabController _controller;

  @override
  void initState() {
    // TODO: implement initState
    _controller = TabController(length: 2, vsync: this, initialIndex: 1);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Expanded(
          flex: 2,
          child: Icon(
            Icons.search,
            size: 30,
            color: Colors.white,
          ),
        ),
        Expanded(
            flex: 8,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              width: 240,
              child: TabBar(
                indicatorColor: Colors.white,
                labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
                unselectedLabelStyle:
                    TextStyle(color: Colors.grey[700], fontSize: 16),
                controller: _controller,
                tabs: [Text("关注"), Text("推荐")],
              ),
            )),
        Expanded(
          flex: 2,
          child: Row(
            children: [
              SizedBox(
                width: 20,
              ),
              Icon(
                Icons.live_tv,
                size: 30,
                color: Colors.white,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class BtnContent extends StatelessWidget {
  const BtnContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: [
        ListTile(
          title: Text(
            "@人民日报",
            style: TextStyle(color: Colors.white),
          ),
          subtitle: Text(
            "达克赛德了，俺看看大师们的快乐读书卡的马拉斯柯达马萨卡老代码sad看了吗看来是多么克拉霉素考dasdasd",
            style: TextStyle(color: Colors.white),
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Row(
          children: [
            Icon(Icons.music_note),
            // Marquee(
            //   text: '人马十大杀手潘大帅阿萨德卡打算打算打打打',
            // )
          ],
        )
      ]),
    );
  }
}

//唱片icon
class RotateAlbum extends StatefulWidget {
  const RotateAlbum({Key? key}) : super(key: key);

  @override
  State<RotateAlbum> createState() => _RotateAlbumState();
}

class _RotateAlbumState extends State<RotateAlbum>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  var animation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 4));
    animation = RotationTransition(
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller)
        ..addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            _controller.forward(
              from: 0.0,
            );
          }
        }),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
        child: Container(
          width: 30,
          height: 30,
          child: CircleAvatar(
            backgroundImage: NetworkImage(
                "https://img2.baidu.com/it/u=334287559,4007305580&fm=253&fmt=auto&app=138&f=PNG?w=281&h=499"),
          ),
        ),
      ),
    );
    _controller.forward(from: 0.0);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: animation,
    );
  }
}

//喜欢 关注 收藏
getButtonList(context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Container(
        width: 40,
        child: Stack(children: [
          Container(
            width: 40,
            height: 40,
            child: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://p1.music.126.net/Dn8SeEUr-7--FlrZ-LKVAw==/18601537720555575.jpg"),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 15.0,
            child: Container(
              width: 25,
              height: 25,
              decoration: BoxDecoration(
                  color: Colors.redAccent,
                  borderRadius: BorderRadius.circular(25)),
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
          ),
        ]),
      ),
      IconText(
        icon: Icon(
          Icons.favorite,
          color: Colors.red,
        ),
        text: "999W",
      ),
      Container(
        child: Column(
          children: [
            IconButton(
              icon: Icon(
                Icons.feedback,
                size: 20,
                color: Colors.white,
              ),
              onPressed: () {
                showBottom(context);
              },
            ),
            Text("评论")
          ],
        ),
      ),
      IconText(
        icon: Icon(
          Icons.replay,
          color: Colors.white,
        ),
        text: "转发",
      ),
    ],
  );
}

class IconText extends StatelessWidget {
  final Icon icon;
  final String text;
  const IconText({required this.icon, required this.text, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(mainAxisSize: MainAxisSize.min, children: [
        icon,
        Text(
          text,
          style: TextStyle(color: Colors.white),
        ),
      ]),
    );
  }
}

//底部弹框
showBottom(context) {
  // RecommendProvider provider = Provider.of<RecommendProvider>(context);
  // ScrollController controller=ScrollController();
  // provider.hideBottomBar();
  showModalBottomSheet(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.circular(10)),
      context: context,
      builder: (_) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(
              create: (BuildContext context) => RecommendProvider(),
            )
          ],
          child: Container(height: 600, child: ReplyFullList()),
        );
      });
}
